<!--
 * @file 卡片组件-小图卡片轮播
 * @author dumeng
 * @date 2022/11/26
-->
<template>
  <div
    v-if="list.length>0"
    ref="swiper4smallimgCard"
    class="swiper4smallimg-card"
    :style="{
      marginTop: `${px2rem(option.top) || 0}`,
      marginBottom: `${px2rem(option.bottom) || 0}`,
      paddingLeft:spacing,
      paddingRight:spacing,
    }"
  >
    <cell-title
      v-if="(isShowModuleName || option.isMore === '1')"
      :title="moduleName"
      :hide-desc="true"
      :option="option"
      :style="{
        'background-color': backgroundColor,
        'border-radius':
          radiusSize+ ' ' + radiusSize + ' 0 0'
      }"
    />
    <van-swipe
      :id="'courseSwiperIndex' + key"
      ref="swiper"
      :duration="1000"
      touchable
      :indicator-color="mainColor"
      :stop-propagation="false"
      :show-indicators="false"
      :loop="false"
      :style="{
        'background-color': option.backgroundColorC,
        'border-radius':isShowModuleName || option.isMore === '1'?
          '0 0 '+ radiusSize+ ' ' + px2rem(32) : px2rem(32)
      }"
      @change="handleChange"
    >
      <van-swipe-item
        v-for="(item, i) in list"
        :key="i"
        :style="{
          paddingTop:paddingTop,
          width: px2rem(swiperItemWidth),
          color: getStyleInfo(i,'textColor'),
          backgroundColor: getStyleInfo(i,'bgColor') ,
          backgroundImage: `url(${getStyleInfo(i,'bgImage')})` }"
      >
        <div
          v-if="getStyleInfo(i,'title') || getStyleInfo(i,'isMore') === '1'"
          class="swiper-item-title"
        >
          <p :style="{color: getStyleInfo(i,'textColor'),}">{{ getStyleInfo(i, 'title') }}</p>
          <div
            v-if="getStyleInfo(i,'isMore') === '1'"
            :style="{color: getStyleInfo(i,'textColor'),}"
          >查看更多
          </div>
        </div>

        <section
          v-for="(ite, j) in item"
          :key="i + '-' + j"
          class="course-swiper-item"
          :class="[Object.keys(ite).length === 0 && 'last']"
          :style="{
            height: px2rem(option.itemHeight)
          }"
        >
          <span>{{ j + 1 }}</span>
          <div
            class="item-img"
            :style="{
              'border-radius': px2rem(option.imgRadiusSize)
            }"
          >
            <label-comp
              v-if="(option.resource === 'hd' || option.resource === 'zb') && labelObj!==undefined"
              :label-list="ite.labelList"
              class-name="my-tag"
            />
            <van-image :src="setImgPath(getMapping(ite, 'imgId'), getMapping(ite, 'imgUrl'))">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img
                  src="../../images/base/error-icon.png"
                  alt
                >
              </template>
            </van-image>
          </div>
          <div class="item-info" :style="{color: getStyleInfo(i,'textColor'),}">
            <div class="item-title etc">
              <span>{{ isInitData ? getMapping(ite, 'title') : ite.title }}</span>
            </div>
            <div v-if="getMapping(ite, 'subTitle') " class="item-number etc">
              <span>{{ isInitData ? getMapping(ite, 'subTitle') : ite.subTitle }}</span>
            </div>
          </div>
        </section>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid'
import mixins, { getVar } from './../mixins'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'

const defImg = ''
export default {
  name: 'Swiper4smallimgCard',
  components: {
    CellTitle,
    LabelComp
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defImg,
      mainColor: '#fff',
      currentIndex: '',
      key: uuidv4(),

      defaultList: [
        [
          {
            'id': '00c33f44-5571-4a2a-8cb9-67431a6fc32a',
            title: '列表标题',
            subTitle: 3047,
            courseImgUrl: defImg
          },
          {
            'id': '00c33f44-5571-4a2a-8cb9-67431a6fc32a',
            title: '列表标题',
            subTitle: 3047,
            courseImgUrl: defImg
          },
          {
            'id': '00c33f44-5571-4a2a-8cb9-67431a6fc32a',
            title: '列表标题',
            subTitle: 3047,
            courseImgUrl: defImg
          }
        ],
        [
          {
            'id': '00c33f44-5571-4a2a-8cb9-67431a6fc32a',
            title: '列表标题',
            subTitle: 3047,
            courseImgUrl: defImg
          },
          {
            'id': '00c33f44-5571-4a2a-8cb9-67431a6fc32a',
            title: '列表标题',
            subTitle: 3047,
            courseImgUrl: defImg
          },
          {
            'id': '00c33f44-5571-4a2a-8cb9-67431a6fc32a',
            title: '列表标题',
            subTitle: 3047,
            courseImgUrl: defImg
          }
        ],
        [
          {
            'id': '00c33f44-5571-4a2a-8cb9-67431a6fc32a',
            title: '列表标题',
            subTitle: 3047,
            courseImgUrl: defImg
          },
          {
            'id': '00c33f44-5571-4a2a-8cb9-67431a6fc32a',
            title: '列表标题',
            subTitle: 3047,
            courseImgUrl: defImg
          },
          {
            'id': '00c33f44-5571-4a2a-8cb9-67431a6fc32a',
            title: '列表标题',
            subTitle: 3047,
            courseImgUrl: defImg
          }
        ]
      ],
      initList: [],
      list: [],
      pageSize: '', // 如果是不按照每页条数
      moreLink: '',
      labelObj: undefined,
      column: '', // 列数, 查询页数
      styleList: [], // 页面样式配置
      souMold: '',
      classLabel: ''
    }
  },
  computed: {
    swiperItemWidth() {
      return Math.floor((750 - this.option.spacing * 2) * 0.76)
      // return this.px2rem(Math.floor((750 - this.option.spacing * 2) * 0.76))
    },
    // 是否单独设置每屏样式
    isSingleSetting() {
      return this.option.isSingleSetting
    },
    // 每屏样式配置信息
    mulPageInfo() {
      return this.option.mulPageInfo
    },
    // 统一样式配置信息
    unifyPageInfo() {
      return this.option.unifyPageInfo
    }
  },
  /*  watch: {
    'option.pageSize': {
      handler(v) {
        if (!this.isInitData && this.defaultList && this.defaultList.length) {
          // this.list = this.arrTrans(v, this.defaultList)

          // const arrList = this.arrTrans(v, this.defaultList)
          this.setDataStyleConfig(this.defaultList)
        }
      },
      immediate: true
    }
  },*/
  async created() {
    this.souMold = this.option.souMold
    this.classLabel = this.option.classLabel
    if (this.isInitData) {
      // 如果每列分类是一致的
      if (this.option.classifyFit) {
        this.pageSize = this.option.pageSize * this.option.column
      }
      this.column = this.option.column

      if (this.option.resource === 'hd' || this.option.resource === 'zb') {
        this.labelObj = await this.getLabelList()
      }
      await this.initData()
      this.setDataStyleConfig()
    } else {
      // const arrList = this.arrTrans(3, this.defaultList)
      this.setDataStyleConfig()
      this.list = this.defaultList
    }
  },
  methods: {

    /**
     * 获取样式
     * */
    getStyleInfo(i, name) {
      if (this.styleList.length > 0) {
        if (this.isSingleSetting) {
          if (i < this.styleList.length) {
            return this.styleList[i][name]
          } else {
            return ''
          }
        } else {
          return this.styleList[0][name]
        }
      } else {
        return ''
      }
    },
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      // const { rows } = result.swiper4smallimgCard?.data
      let rows = []
      if (Object.prototype.toString.call(result.swiper4smallimgCard?.data) === '[object Array]') {
        rows = result.swiper4smallimgCard?.data || []
      } else {
        rows = result.swiper4smallimgCard?.data.rows || []
      }
      this.initList = rows
      if ((this.option.resource === 'hd' || this.option.resource === 'zb') && this.labelObj !== undefined) {
        this.setLabel(this.initList, 'initList')
      }

      if (this.option.classifyFit) {
        this.list = this.arrTrans(this.option.pageSize, this.initList)
        // this.setDataStyleConfig(arrList)
      } else {
        this.list = this.initList
      }
    },

    setDataStyleConfig() {
      // 如果单独设置每屏的数据和样式
      if (this.isSingleSetting) {
        if (this.mulPageInfo && this.mulPageInfo.length > 0) {
          this.styleList = this.mulPageInfo
        }
      } else if (this.unifyPageInfo && this.unifyPageInfo.length > 0) {
        this.styleList = this.unifyPageInfo
      }
    },
    handleChange(index) {
      if (index === this.list.length - 1) {
        setTimeout(() => {
          document.querySelector(
            `#courseSwiperIndex${this.key} .van-swipe__track`
          ).style.transform = `translateX(${
            this.swiperItemWidth * index * -1
          }px)`
        }, 10)
      }
    },
    /**
     * 数组分页
     */
    arrTrans(num, arr) {
      const array = []
      arr.forEach((item, index) => {
        const page = Math.floor(index / num)
        if (!array[page]) {
          array[page] = []
        }
        array[page].push(item)
      })
      return array
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';

.swiper4smallimg-card {
  width: rem(750);
  overflow: hidden;

  .van-swipe {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 0 0 rem(16) rem(16);
    background-color: #fff;

    .van-swipe-item {
      padding-right: rem(20);
      margin-right: rem(20);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      border-radius: rem(16);

      .swiper-item-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        height: rem(88);
        padding: 0 rem(24);

        > p {
          font-size: rem(28);
          font-weight: bold;
          text-align: left;
        }

        > div {
          margin-left: rem(20);
          flex: 0 0 auto;
          font-size: rem(26);
          font-weight: 400;
        }
      }

      .course-swiper-item {
        height: rem(106);
        margin-bottom: rem(30);
        position: relative;
        display: flex;
        align-items: center;

        > span {
          flex: 0 0 auto;
          display: inline-block;
          width: rem(54);
          font-size: rem(24);
          font-weight: 400;
          text-align: center;
          color: #ffffff;
        }

        &:first-child {
          padding-top: 0;
        }

        &:last-child:after {
          display: none;
        }

        &.last:after {
          display: none;
        }

        .item-img {
          flex: 0 0 auto;
          width: rem(186);
          height: 100%;
          margin-right: rem(20);
          overflow: hidden;
          position: relative;

          .van-image {
            width: 100%;
            height: 100%;

            .van-image__error {
              > img {
                width: rem(120);
                height: rem(120);
              }
            }
          }
        }

        .item-info {
          height: rem(114);
          flex: auto;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: rem(8) 0;

          .item-title {
            width: 100%;
            font-size: rem(28);
            font-family: PingFang SC Medium, PingFang SC Medium-Medium;
            font-weight: bold;
            text-align: left;
          }

          .item-number {
            width: 100%;
            font-size: rem(24);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            text-align: left;
            opacity: 0.5;
          }
        }
      }
    }

    .van-swipe__indicators {
      bottom: rem(10);
    }
  }
}
</style>
